<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>悟诚数移动据分析平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="tailwindcss.js"></script>
    <!-- 引入Font Awesome -->
    <link href="font-awesome.min.css" rel="stylesheet">
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6', // 蓝色作为主色调
                        secondary: '#10B981', // 绿色作为辅助色
                        warning: '#F59E0B', // 警告色
                        danger: '#EF4444', // 危险色
                        success: '#10B981', // 成功色
                        neutral: {
                            100: '#F3F4F6',
                            200: '#E5E7EB',
                            300: '#D1D5DB',
                            400: '#9CA3AF',
                            500: '#6B7280',
                            600: '#4B5563',
                            700: '#374151',
                            800: '#1F2937',
                            900: '#111827',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .card-hover {
                transition: transform 0.2s, box-shadow 0.2s;
            }
            .card-hover:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .tab-active {
                color: #3B82F6;
                border-bottom: 2px solid #3B82F6;
            }
        }
    </style>
</head>
<body class="bg-neutral-100 font-sans text-neutral-800">
    <!-- 顶部导航栏 -->
    <header class="bg-white border-b border-neutral-200 sticky top-0 z-10">
    <div class="container mx-auto px-4 py-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-4">
                <button id="back-button" class="text-neutral-600 hover:text-primary transition-colors" onclick="window.location.href='index.html'">
                    <i class="fa fa-angle-left text-lg"></i>
                </button>
                <h1 class="text-xl font-semibold text-neutral-800">项目分析</h1>
            </div>
            <!-- 右侧可以添加筛选器等元素 -->
        </div>
    </div>
</header>

<main class="container mx-auto px-4 py-6">
    <!-- 标签页导航 -->
    <div class="mb-6">
        <div class="flex border-b border-neutral-200">
            <button id="project-tab" class="tab-active px-4 py-3 text-sm font-medium text-primary border-b-2 border-primary" onclick="switchTab('project')">
                项目投入分析
            </button>
            <button id="performance-tab" class="px-4 py-3 text-sm font-medium text-neutral-500" onclick="switchTab('performance')">
                人天投入
            </button>
            <button id="payment-tab" class="px-4 py-3 text-sm font-medium text-neutral-500" onclick="switchTab('payment')">
                绩效考核
            </button>
            
        </div>
    </div>

    <!-- 业绩汇总内容 - 修改为人员投入统计 -->
    <div id="performance-content" class="space-y-6 hidden">
        <!-- 排行榜图表 -->
        <div class="bg-white rounded-lg overflow-hidden card-shadow">
            <div class="p-4 border-b border-neutral-100 flex justify-between items-center">
                <h2 class="text-lg font-semibold text-neutral-800">部门人天投入排行榜</h2>
                <div class="flex items-center space-x-2">
                    <!-- 添加年份下拉筛选框 -->
                    <select id="yearFilter" class="text-sm border border-neutral-200 rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                        <option value="2023">2023年</option>
                        <option value="2024">2024年</option>
                        <option value="2025" selected>2025年</option>
                    </select>
                </div>
            </div>
            <div class="p-4">
                <div class="h-[400px] w-full">
                    <canvas id="performanceRankingChart"></canvas>
                </div>
            </div>
        </div>

        <!-- 部门卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <!-- 研发部门 -->
            <div class="bg-white rounded-lg overflow-hidden card-shadow">
                <div class="p-4 border-b border-neutral-100">
                    <h3 class="text-base font-medium text-neutral-800">研发部门</h3>
                </div>
                <div class="p-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <p class="text-xs text-neutral-500 mb-1">总投入人天</p>
                            <p class="font-semibold text-lg">1,256</p>
                        </div>
                        <div>
                            <p class="text-xs text-neutral-500 mb-1">同比变化</p>
                            <p class="font-semibold text-lg text-success">+12.3%</p>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="flex justify-between text-xs mb-1">
                            <span class="text-neutral-500">项目分布</span>
                        </div>
                        <div class="space-y-2">
                            <div>
                                <div class="flex justify-between text-xs mb-1">
                                    <span class="text-neutral-600">核心产品开发</span>
                                    <span class="text-neutral-600">624人天 (49.7%)</span>
                                </div>
                                <div class="w-full bg-neutral-100 rounded-full h-2.5">
                                    <div class="bg-primary h-2.5 rounded-full" style="width: 49.7%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between text-xs mb-1">
                                    <span class="text-neutral-600">技术预研</span>
                                    <span class="text-neutral-600">286人天 (22.8%)</span>
                                </div>
                                <div class="w-full bg-neutral-100 rounded-full h-2.5">
                                    <div class="bg-blue-400 h-2.5 rounded-full" style="width: 22.8%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between text-xs mb-1">
                                    <span class="text-neutral-600">技术支持</span>
                                    <span class="text-neutral-600">346人天 (27.5%)</span>
                                </div>
                                <div class="w-full bg-neutral-100 rounded-full h-2.5">
                                    <div class="bg-blue-300 h-2.5 rounded-full" style="width: 27.5%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4 text-right">
                        <button class="text-primary text-sm font-medium flex items-center justify-end space-x-1 hover:underline">
                            <span>查看详情</span>
                            <i class="fa fa-angle-right"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 市场部门 -->
            <div class="bg-white rounded-lg overflow-hidden card-shadow">
                <div class="p-4 border-b border-neutral-100">
                    <h3 class="text-base font-medium text-neutral-800">市场部门</h3>
                </div>
                <div class="p-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <p class="text-xs text-neutral-500 mb-1">总投入人天</p>
                            <p class="font-semibold text-lg">876</p>
                        </div>
                        <div>
                            <p class="text-xs text-neutral-500 mb-1">同比变化</p>
                            <p class="font-semibold text-lg text-success">+8.5%</p>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="flex justify-between text-xs mb-1">
                            <span class="text-neutral-500">项目分布</span>
                        </div>
                        <div class="space-y-2">
                            <div>
                                <div class="flex justify-between text-xs mb-1">
                                    <span class="text-neutral-600">市场活动</span>
                                    <span class="text-neutral-600">423人天 (48.3%)</span>
                                </div>
                                <div class="w-full bg-neutral-100 rounded-full h-2.5">
                                    <div class="bg-primary h-2.5 rounded-full" style="width: 48.3%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between text-xs mb-1">
                                    <span class="text-neutral-600">客户调研</span>
                                    <span class="text-neutral-600">245人天 (28.0%)</span>
                                </div>
                                <div class="w-full bg-neutral-100 rounded-full h-2.5">
                                    <div class="bg-blue-400 h-2.5 rounded-full" style="width: 28.0%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between text-xs mb-1">
                                    <span class="text-neutral-600">竞品分析</span>
                                    <span class="text-neutral-600">208人天 (23.7%)</span>
                                </div>
                                <div class="w-full bg-neutral-100 rounded-full h-2.5">
                                    <div class="bg-blue-300 h-2.5 rounded-full" style="width: 23.7%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4 text-right">
                        <button class="text-primary text-sm font-medium flex items-center justify-end space-x-1 hover:underline">
                            <span>查看详情</span>
                            <i class="fa fa-angle-right"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 销售部门 -->
            <div class="bg-white rounded-lg overflow-hidden card-shadow">
                <div class="p-4 border-b border-neutral-100">
                    <h3 class="text-base font-medium text-neutral-800">销售部门</h3>
                </div>
                <div class="p-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <p class="text-xs text-neutral-500 mb-1">总投入人天</p>
                            <p class="font-semibold text-lg">982</p>
                        </div>
                        <div>
                            <p class="text-xs text-neutral-500 mb-1">同比变化</p>
                            <p class="font-semibold text-lg text-danger">-3.2%</p>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="flex justify-between text-xs mb-1">
                            <span class="text-neutral-500">项目分布</span>
                        </div>
                        <div class="space-y-2">
                            <div>
                                <div class="flex justify-between text-xs mb-1">
                                    <span class="text-neutral-600">新客户开发</span>
                                    <span class="text-neutral-600">376人天 (38.3%)</span>
                                </div>
                                <div class="w-full bg-neutral-100 rounded-full h-2.5">
                                    <div class="bg-primary h-2.5 rounded-full" style="width: 38.3%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between text-xs mb-1">
                                    <span class="text-neutral-600">老客户维护</span>
                                    <span class="text-neutral-600">428人天 (43.6%)</span>
                                </div>
                                <div class="w-full bg-neutral-100 rounded-full h-2.5">
                                    <div class="bg-blue-400 h-2.5 rounded-full" style="width: 43.6%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between text-xs mb-1">
                                    <span class="text-neutral-600">方案制作</span>
                                    <span class="text-neutral-600">178人天 (18.1%)</span>
                                </div>
                                <div class="w-full bg-neutral-100 rounded-full h-2.5">
                                    <div class="bg-blue-300 h-2.5 rounded-full" style="width: 18.1%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4 text-right">
                        <button class="text-primary text-sm font-medium flex items-center justify-end space-x-1 hover:underline">
                            <span>查看详情</span>
                            <i class="fa fa-angle-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 区域回款内容 - 修改为绩效考核统计 -->
    <div id="payment-content" class="space-y-6 hidden">
        <!-- 绩效考核排行榜 -->
        <div class="bg-white rounded-lg overflow-hidden card-shadow">
            <div class="p-4 border-b border-neutral-100 flex justify-between items-center">
                <h2 class="text-lg font-semibold text-neutral-800">员工绩效考核排行榜</h2>
                <div class="flex items-center space-x-2">
                    <div class="text-sm text-neutral-500">
                        <select id="paymentYearFilter" class="text-sm border border-neutral-200 rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                            <option value="2023">2023年</option>
                            <option value="2024">2024年</option>
                            <option value="2025" selected>2025年</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="p-4">
                <div class="h-[400px] w-full">
                    <canvas id="paymentRankingChart"></canvas>
                </div>
            </div>
        </div>

        <!-- 员工绩效考核详情 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- 研发部门 -->
            <div class="bg-white rounded-lg overflow-hidden card-shadow">
                <div class="p-4 border-b border-neutral-100">
                    <h3 class="text-base font-medium text-neutral-800">研发部门绩效考核</h3>
                </div>
                <div class="p-4">
                    <div class="space-y-4">
                        <!-- 考核指标 -->
                        <div class="grid grid-cols-3 gap-4 text-center">
                            <div class="p-3 bg-neutral-50 rounded-lg">
                                <p class="text-xs text-neutral-500 mb-1">平均分</p>
                                <p class="font-semibold text-lg">87.2</p>
                            </div>
                            <div class="p-3 bg-neutral-50 rounded-lg">
                                <p class="text-xs text-neutral-500 mb-1">优秀率</p>
                                <p class="font-semibold text-lg text-success">32.5%</p>
                            </div>
                            <div class="p-3 bg-neutral-50 rounded-lg">
                                <p class="text-xs text-neutral-500 mb-1">待改进</p>
                                <p class="font-semibold text-lg text-danger">5.8%</p>
                            </div>
                        </div>
                        
                        <!-- 指标分布 -->
                        <div>
                            <div class="text-xs text-neutral-500 mb-2">绩效考核分数分布</div>
                            <div class="space-y-2">
                                <div>
                                    <div class="flex justify-between text-xs mb-1">
                                        <span class="text-neutral-600">90-100分 (优秀)</span>
                                        <span class="text-neutral-600">32.5%</span>
                                    </div>
                                    <div class="w-full bg-neutral-100 rounded-full h-2.5">
                                        <div class="bg-success h-2.5 rounded-full" style="width: 32.5%"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex justify-between text-xs mb-1">
                                        <span class="text-neutral-600">80-89分 (良好)</span>
                                        <span class="text-neutral-600">51.2%</span>
                                    </div>
                                    <div class="w-full bg-neutral-100 rounded-full h-2.5">
                                        <div class="bg-primary h-2.5 rounded-full" style="width: 51.2%"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex justify-between text-xs mb-1">
                                        <span class="text-neutral-600">70-79分 (合格)</span>
                                        <span class="text-neutral-600">10.5%</span>
                                    </div>
                                    <div class="w-full bg-neutral-100 rounded-full h-2.5">
                                        <div class="bg-warning h-2.5 rounded-full" style="width: 10.5%"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex justify-between text-xs mb-1">
                                        <span class="text-neutral-600"><70分 (待改进)</span>
                                        <span class="text-neutral-600">5.8%</span>
                                    </div>
                                    <div class="w-full bg-neutral-100 rounded-full h-2.5">
                                        <div class="bg-danger h-2.5 rounded-full" style="width: 5.8%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-4 text-right">
                            <button class="text-primary text-sm font-medium flex items-center justify-end space-x-1 hover:underline">
                                <span>查看详情</span>
                                <i class="fa fa-angle-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 市场部门 -->
            <div class="bg-white rounded-lg overflow-hidden card-shadow">
                <div class="p-4 border-b border-neutral-100">
                    <h3 class="text-base font-medium text-neutral-800">市场部门绩效考核</h3>
                </div>
                <div class="p-4">
                    <div class="space-y-4">
                        <!-- 考核指标 -->
                        <div class="grid grid-cols-3 gap-4 text-center">
                            <div class="p-3 bg-neutral-50 rounded-lg">
                                <p class="text-xs text-neutral-500 mb-1">平均分</p>
                                <p class="font-semibold text-lg">84.6</p>
                            </div>
                            <div class="p-3 bg-neutral-50 rounded-lg">
                                <p class="text-xs text-neutral-500 mb-1">优秀率</p>
                                <p class="font-semibold text-lg text-success">28.3%</p>
                            </div>
                            <div class="p-3 bg-neutral-50 rounded-lg">
                                <p class="text-xs text-neutral-500 mb-1">待改进</p>
                                <p class="font-semibold text-lg text-danger">7.2%</p>
                            </div>
                        </div>
                        
                        <!-- 指标分布 -->
                        <div>
                            <div class="text-xs text-neutral-500 mb-2">绩效考核分数分布</div>
                            <div class="space-y-2">
                                <div>
                                    <div class="flex justify-between text-xs mb-1">
                                        <span class="text-neutral-600">90-100分 (优秀)</span>
                                        <span class="text-neutral-600">28.3%</span>
                                    </div>
                                    <div class="w-full bg-neutral-100 rounded-full h-2.5">
                                        <div class="bg-success h-2.5 rounded-full" style="width: 28.3%"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex justify-between text-xs mb-1">
                                        <span class="text-neutral-600">80-89分 (良好)</span>
                                        <span class="text-neutral-600">48.7%</span>
                                    </div>
                                    <div class="w-full bg-neutral-100 rounded-full h-2.5">
                                        <div class="bg-primary h-2.5 rounded-full" style="width: 48.7%"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex justify-between text-xs mb-1">
                                        <span class="text-neutral-600">70-79分 (合格)</span>
                                        <span class="text-neutral-600">15.8%</span>
                                    </div>
                                    <div class="w-full bg-neutral-100 rounded-full h-2.5">
                                        <div class="bg-warning h-2.5 rounded-full" style="width: 15.8%"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex justify-between text-xs mb-1">
                                        <span class="text-neutral-600"><70分 (待改进)</span>
                                        <span class="text-neutral-600">7.2%</span>
                                    </div>
                                    <div class="w-full bg-neutral-100 rounded-full h-2.5">
                                        <div class="bg-danger h-2.5 rounded-full" style="width: 7.2%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-4 text-right">
                            <button class="text-primary text-sm font-medium flex items-center justify-end space-x-1 hover:underline">
                                <span>查看详情</span>
                                <i class="fa fa-angle-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 区域人员详情页 - 调整为部门员工详情 -->
    <div id="region-detail-content" class="fixed inset-0 bg-white z-20 hidden overflow-y-auto">
        <div class="sticky top-0 bg-white z-10 border-b border-neutral-200">
            <div class="container mx-auto px-4 py-3">
                <div class="flex items-center space-x-4">
                    <button id="region-back-button" class="text-neutral-600 hover:text-primary transition-colors">
                        <i class="fa fa-angle-left text-lg"></i>
                    </button>
                    <h2 id="region-detail-title" class="text-lg font-semibold flex-1 truncate"></h2>
                </div>
            </div>
        </div>
        
        <div class="container mx-auto px-4 py-6">
            <!-- 部门员工列表 -->
            <div id="salesperson-list" class="space-y-4">
                <!-- 人员卡片将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <!-- 项目投入分析内容 -->
    <div id="project-content" class="space-y-6">
        <!-- 项目投入排行榜 -->
        <div class="bg-white rounded-lg overflow-hidden card-shadow">
            <div class="p-4 border-b border-neutral-100 flex justify-between items-center">
                <h2 class="text-lg font-semibold text-neutral-800">项目投入排行榜</h2>
                <div class="flex items-center space-x-2">
                    <div class="text-sm text-neutral-500">
                        <select id="projectYearFilter" class="text-sm border border-neutral-200 rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                            <option value="2023">2023年</option>
                            <option value="2024">2024年</option>
                            <option value="2025" selected>2025年</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="p-4">
                <div class="h-[400px] w-full">
                    <canvas id="projectRankingChart"></canvas>
                </div>
            </div>
        </div>

        <!-- 项目卡片列表 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="projectCardsContainer">
            <!-- 项目卡片将通过JavaScript动态生成 -->
        </div>
    </div>

</main>

<script src="chart.js"></script>
<script src="chartjs-plugin-datalabels.min.js"></script>
<script src="pmo.js"></script>
<script async defer 
id="sqlbot-assistant-float-script-7368894173757313024" 
src="http://192.168.1.138:5173/assistant.js?id=7368894173757313024"></script>
</body>
</body>
</html>